<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>Welcome to Bilibili!</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, initial-scale=1.0,maximum-scale=1.0, user-scalable=0;">
		<link rel="stylesheet" href="css/common.css">
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<link rel="stylesheet" href="css/main_page.css">
	</head>

	<body>
		<template id="learn_page">
			<div>
				我是学习页面
			</div>
		</template>
		<template id="TV_page">
			<div>
				<el-row>
					<el-col :xs="24" :md="12">
						<el-carousel :autoplay="true" :loop="true" direction="horizontal" arrow="hover">
							<el-carousel-item>
								<el-image src="./img/IMG_5384.JPG">
								</el-image>
							</el-carousel-item>
							<el-carousel-item>
								<el-image src="./img/IMG_5384.JPG">
								</el-image>
							</el-carousel-item>
							<el-carousel-item>
								<el-image src="./img/IMG_5384.JPG">
								</el-image>
							</el-carousel-item>
						</el-carousel>
					</el-col>
					<el-col :xs="24" :md="12">
						<el-row>
							<el-col style="width: 20%;" :xs="12" :sm="12">
								<i class="el-icon-video-camera">
								</i><br>
								<p>番剧</p>
							</el-col>
							<el-col style="width: 20%;" :xs="12" :sm="12">
								<i class="el-icon-connection">
								</i><br>
								<p>国创</p>
							</el-col>
							<el-col style="width: 20%;" :xs="12" :sm="12">
								<i class="el-icon-date">
								</i><br>
								<p>时间表</p>
							</el-col>
							<el-col style="width: 20%;" :xs="12" :sm="12">
								<i class="el-icon-magic-stick">
								</i><br>
								<p>索引</p>
							</el-col>
							<el-col style="width: 20%;" :xs="12" :sm="12">
								<i class="el-icon-star-on">
								</i><br>
								<p>本周精选</p>
							</el-col>
						</el-row>
					</el-col>
	
					<!-- vue v-for -->
					<el-col :xs="11" :sm="6" :md="6" :lg="6" v-for="item in fanju " class="video-item">
						<div id="mycoverbox" @click="dialogVisible = true" class="zoomImage"
						v-bind:style="{backgroundImage:'url(' + item.cover_url + ')'}" >
						<div class="video-info" >
							<span style="margin-left: 2px;">
								{{item.comments}}</span>
							<div style="display: inline-block;float: right;margin-right: 20px;">{{item.length}}
							</div>
						</div>
					</div>
					<div class="video-intro">
						<div style="height: 38px;">{{item.title}}</div>
						<div
							style="margin-top: 10px;font-family:'微软雅黑';color:grey;float: left;display: inline-block;">
							{{item.tag}}</div>
						<div style="margin-top: 9px;color:gery;float: right;display: inline-block;"><i
								class="el-icon-more"></i></div>
					</div>
					</el-col>
				</el-row>
			</div>
		</template>
		<template id="Cover-19">
			<div>
				我是抗击肺炎专题页面
			</div>
		</template>
		<template id="main_page">
			<div>
				<el-carousel style="box-shadow: 0 0 1px 1px lightpink;" indicator-position="outside">
					<el-carousel-item v-for="item in cover_source" :key="item">
						<img :src="item" alt="">
					</el-carousel-item>
				</el-carousel>
					<div class="video-list" style="text-align: left;">
						<el-row>
							<el-col :xs="11" :sm="6" :md="6" :lg="6" v-for="item in video_source" class="video-item">
								<div @click="dialogVisible = true" class="zoomImage" v-bind:style="{backgroundImage:'url(' + item.cover_url + ')'}">
									<div class="video-info">
										<span><i class="el-icon-video-camera"></i> {{item.popularation}}</span>
										<span style="margin-left: 2px;"><i class="el-icon-chat-line-square"></i> {{item.comments}}</span>
										<div style="display: inline-block;float: right;margin-right: 20px;">{{item.length}}</div>
									</div>
								</div>
								<div class="video-intro">
									<div style="height: 38px;">{{item.title}}</div>
									<div style="margin-top: 10px;font-family:'微软雅黑';color:grey;float: left;display: inline-block;">{{item.tag}}</div>
									<div style="margin-top: 9px;color:gery;float: right;display: inline-block;"><i class="el-icon-more"></i></div>
								</div>
							</el-col>
						</el-row>
				</div>
				<el-dialog class="abow_dialog" title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
					<span>非常抱歉，视频暂不支持播放哦</span>
					<span slot="footer" class="dialog-footer">
						<el-button @click="dialogVisible = false">取 消</el-button>
						<el-button type="primary" @click="dialogVisible = false">好 吧</el-button>
					</span>		
				</el-dialog>
			</div>
		</template>
		<template id="live_page">
			<div>
				我是直播页
				<h1 style="height: 500px;width: 200px; background-color: red;"></h1>
			</div>
		</template>
		<template id="recommond_page">
			<div>
				我是热门页
			</div>
		</template>
		<template id="container">
			<div>
				<el-container>
					<el-header>
						<div class="top_bar">
							<el-row>
								<el-col :xs="4" :sm="4" :md="4" :lg="4" :span="4">
									<el-avatar size="medium" :src="url_icon"></el-avatar>
								</el-col>
								<el-col :xs="14" :sm="14" :md="14" :lg="14" :span="14">
									<el-form ref="form" label-width="80px">
										<el-input class="raduis-input" suffix-icon="el-icon-search" size="medium"></el-input>
									</el-form>
								</el-col>
								<el-col :xs="3" :sm="3" :md="3" :lg="3" :span="3">
									<span ><i class="rotate el-icon-star-on top_icon"></i></span>
								</el-col>
								<el-col :xs="3" :sm="3" :md="3" :lg="3" :span="3">
									<span><i class="el-icon-message top_icon"></i></span>
								</el-col>
							</el-row>
						</div>
					</el-header>
					<div class="fixedTopBar">
						<el-tabs v-model="activeNav" @tab-click="switch_template">
							<el-tab-pane v-for="item in Nav"  :label="item.name" :name="item.label"></el-tab-pane>
						</el-tabs>
					</div>

					<el-main>
						<keep-alive>
							<component :is='content'></component>
						</keep-alive>
					</el-main>

					<el-footer class="bottom-nav">
						<ul>
							<li v-for='item in bottom_Nav'>
								<div v-if="item.name=='会员购'">
									<a style="text-decoration: none;color: black;" href="pages/vipshop.html">
										<i :class="item.label" style="font-size: 16px;"></i></br>
										<span style="font-size:14px">{{item.name}}</span>
									</a>
								</div>
								<div v-else>
									<i :class="item.label" style="font-size: 16px;"></i></br>
									<span style="font-size:14px">{{item.name}}</span>
								</div>
							</li>
						</ul>
					</el-footer>
				</el-container>
			</div>
		</template>
		<div id="app" v-cloak>
			<container></container>
		</div>
	</body>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script type="text/javascript" src="js/main_page_common_function.js"></script>
	<script src="js/main_page_react.js" type="text/javascript"></script>

</html>